<template>
	<view>
			<view class="cai-modal cai-only-modal">
				<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
					<view class="cu-dialog">
						<view class="padding-xl">
							<text :style="{fontSize: titleFontSize+'rpx'}">
								{{ title }}
							</text>
							<view class="subtitle" v-if="subtitle">
								{{ subtitle }}
							</view>
						</view>
						<view class="tags">
							<view class="tag" v-for="i in tags" @click="clickTag(i)">
								{{ i }}
							</view>
						</view>
						<view class="cu-bar bg-white">
							<button class="action action-cancel cai-font-bold" @tap="hideModal">
								{{ cancelText }}
							</button>
						</view>
					</view>
				</view>
			</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			eventMask: {
				type: String,
				default: ''
			},
			title: {
			  type: String,
			  default: '是否确认？'
			},
			titleFontSize: {
				type: String,
				default: '32'
			},
			subtitle: {
				type: String,
				default: ''
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			isTabbar: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				modalName: null,
				showModalStatus: false,
				tags: ['哎哎', '颠三倒']
			}
		},
		computed: {

		},
		methods:{
			showModal() {
				this.modalName = 'bottomModal';
				this.showModalStatus = true;
			},
			hideModal() {
				this.modalName = null
				this.showModalStatus = false;
			},
			defineModal() {
				this.$emit('clickDefine', '');
			},
			clickTag() {
				this.hideModal();
			}
		}
	}
</script>

<style lang="scss">

.cai-modal.cai-only-modal{
	.cu-modal{
		.padding-xl{
			line-height: 104rpx;
			font-weight: 600;
			font-size: ($font-size-lg);
			margin-bottom: 0;
		}
	}
	.action{
		border-radius: 0;
	}
	.action-cancel{
		width: 100%;
		background-color: #fff;
		&:hover{
			background-color: #f3f3f3;
		}
	}
	.cu-modal.bottom-modal .cu-dialog{
		padding-bottom: 0;
		padding-top: 0;
	}
	.cu-bar .action:last-child{
		margin-left: 0;
	}
	.cu-bar .action:first-child{
		margin-right: 0;
	}
}

</style>
